<template>
  <div class="Rotation">
    <el-carousel height="90%" indicator-position="outside">
      <el-carousel-item v-for="(item, index) in PictureURL" :key="index">
        <img :src="require(`../assets/image/${item.image_path}`)" alt="" class="welcome-img">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  // 获取图片路径
  created () {
    this.Picture()
  },
  data () {
    return {
      PictureURL: []
    }
  },
  methods: {
    async Picture () {
      const { data: res } = await this.$http.get('picture')
      if (res.status !== 200) return this.$message.error('获取图片失败!')
      this.PictureURL = res.picture
      console.log(res)
    }
  }
}
</script>

<style lang="less" scoped>
.Rotation {
    height: 100%;
}

.el-main {
    padding: 0;
}

.el-carousel {
  height: 100%;
}

.welcome-img {
    height: 100%;
    width: 100%;
}
</style>
